<template>
  <div class="m-message_detail">
    <el-form class="form" ref='form' label-width="120px" :model="form" :rules='rules'>
      <el-form-item label="公告标题：" prop='title'>
        <el-input type="text" placeholder="请输入公告标题" v-model.trim="form.title"></el-input>
      </el-form-item>
      <el-form-item label="公告内容：" prop='content'>
        <tinymce @input='getContent' ref='tinymce'  :onUploadImg='onUploadImg'></tinymce>
        <el-upload
          class="content-uploader"
          accpet='image/jpg,image/jpeg,image/gif,image/png'
          :action="uploadUrl"
          :data='uploadData'
          :show-file-list="false"
          :on-success="handleContentSuccess"
          :before-upload="beforeContentUpload">
        </el-upload>
      </el-form-item>
      <el-form-item label='推送对象：'>
        <ul class='selectStaff'>
          <li v-for='(v, i) in selectObjs' :key='v.staff_id'>
            <span>{{ v.name }}</span><i class='el-icon-close' @click='removeItem(i)'></i>
          </li>
          <li>
            <i class='el-icon-plus' @click='showStaffDialog'></i>
          </li>
        </ul>
      </el-form-item>
      <el-form-item align='right'>
        <el-button type="primary" @click="confirm">{{ isAdd ? '添加公告' : '确认修改' }}</el-button>
      </el-form-item>
    </el-form>

    <select-list ref='selectList' title='选择员工' listPath='firmGetStaffs' @getData='getData' />
  </div>
</template>

<script>
import NProgress from 'nprogress'
import tinymce from '@/components/tinymce'
import oObserver from '@/util/eventBus'
import selectList from '@/module/lesson/components/selectList'

export default {

  name: 'm-message_set',

  components: {
    tinymce,
    selectList
  },

  data() {
    return {
      form: {
        title: '',
        content: ''
      },
      uploadUrl: '/mall/utils/uploadImage',
      rules: {
        title: [
          { required: true, message: '请输入公告标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入公告内容', trigger: 'blur' }
        ]
      },
      uploadData: {
        aFirmId: this.aFirmId
      },
      id: '',
      isAdd: true,
      selectObjs: [],
      ifRequesting: false
    }
  },

  mounted() {
    const { id } = this.$route.query
    if (id) {
      this.isAdd = false
      this.id = id
      this.getDetail(id)
    }
    window.$tools.loadJS({
      obj: 'tinymce',
      url: '//cdn.bootcss.com/tinymce/4.7.6/tinymce.min.js'
    }).then(() => {
      console.log(window.tinymce)
      this.$refs.tinymce.initTinymce()
    })
  },

  methods: {
    confirm() {
      if (this.ifRequesting) return
      this.$refs.form.validate((valid) => {
        if (!valid) return
        this.update()
      })
    },

    async update() {
      this.ifRequesting = true
      const { title, content } = this.form
      const { code } = await this.$api[this.isAdd ? 'linkCreateNotice' : 'linkModifyNotice']({
        aMerchantId: this.aFirmId,
        aTitle: title,
        aContent: content,
        aStaffIds: this.selectObjs.map(v => v.staff_id || v.id),
        aId: this.id || ''
      })
      this.ifRequesting = false
      if (code === 0) {
        oObserver.dispatch('updateFirmId')
        this.__notify(this.isAdd ? '添加成功' : '修改成功')
        this.$router.push({ name: 'message_notice' })
      }
    },

    reset() {
      this.$refs.form.resetFields()
    },

    async getDetail(id) {
      const { code, data } = await this.$api.linkGetNoticeInfo({ aId: id })
      if (code === 0) {
        this.$refs.selectList.setData(data.staffs)
        this.form.title = data.title
        this.form.content = data.content
      }
      this.$nextTick(() => {
        this.$refs.tinymce.setContent(this.form.content)
      })
    },

    beforeContentUpload(file) {
      if (!this.__checkUploadFile(file)) return
      this.uploadData.aImageFile = file
      NProgress.start()
    },

    handleContentSuccess({ code, data, msg }) {
      NProgress.done()
      if (code !== 0) {
        this.__notify('提示', msg, 'info')
        return
      }
      this.$refs.tinymce.setContent(((this.form.content || '') + `<p><img src='${data.file_url}'></p>`))
    },

    getContent(value) {
      this.form.content = value
    },

    // 点击编辑器按钮，触发 input[file] 上传
    onUploadImg(editor) {
      document.querySelector('.content-uploader input').click()
    },

    getData(data) {
      console.log(data)
      this.selectObjs = data
    },

    showStaffDialog() {
      this.$refs.selectList.show()
    },

    removeItem(i) {
      this.$refs.selectList.deleteObj(i)
    }
  }

}
</script>

<style lang="less">
.m-message_detail {
  .form {
  }
  .selectStaff {
    display: flex;
    flex-wrap: wrap;
    li {
      padding-right: 20px;
      padding-bottom: 15px;
    }
  }
}
</style>
